<template>
  <view class="content">
    <view class="activity-list">
      <view
        class="activity-item"
        v-for="item in activityList"
        :key="item.title"
        @click="handleClick(item.path)"
      >
        <view class="activity-item-title">
          <text>{{ item.title }}</text>
        </view>
        <image
          :src="item.image"
          mode="widthFix"
          class="activity-item-image"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      activityList: [
        {
          title: "密码本",
          image: require("@/static/icons/icon_umlxzin02bk/biaoji.png"),
          path: "/pages/product/codeBook",
        },
        {
          title: "题库",
          image: require("@/static/icons/icon_umlxzin02bk/zhongduan.png"),
          path: "/pages/product/questionBank",
        },
      ],
    };
  },
  created() {},
  mounted() {
    
  },
  methods: {
    handleClick(path) {
      uni.navigateTo({
        url: path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
 
  background: linear-gradient(
    to bottom,
    #f0f7ff 0%,
    // 非常浅的蓝色起始
    #e6f0ff 100% // 稍深的浅蓝色结束
  );
  min-height: 100vh;
  padding-bottom: 120rpx; // 为TabBar预留空间
  box-sizing: border-box;
  height: 100%;
}
.activity-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  
}
.activity-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 12px;
  width: 100%;
  height: 100%;
  padding: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
    background: rgba(0, 0, 0, 0.02);
  }
}
.activity-item-title {
  font-size: 28rpx;
  color: #333;
  
  &:active {
    opacity: 0.8;
    transform: scale(0.98);
  }
}
.activity-item-image {
  width: 32px;
  height: 32px;
}
</style>
